<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - MenuField Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!--[if IE 6]>
<link type='text/css' rel='stylesheet' href='../css/inputEx-IE6.css' />
<![endif]-->

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body class="yui-skin-sam">

<h1>inputEx - MenuField Usage</h1>


<!-- Example 1 -->
<div class='exampleDiv'>
	<h2>Basic MenuField creation</h2>
	<p>Use the following code to create a basic inputEx MenuField.</p>
	<div class='demoContainer' id='container1'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
		   var menuItems = [
			   {
				   text:'America',
				   submenu:{
					   itemdata:[
							{text:'United States of America',value:'Us'},
							{text:'Canada',value:'Ca'}
						]
					}
			   },
				{
				   text:'Europe',
				   submenu:{
					   itemdata:[
							{
								text:'Western Europe',
								submenu:{
								   itemdata:[
										{text:'France',value:'Fr'},
										{text:'United Kingdom',value:'Uk'},
										{text:'Germany',value:'De'}
									]
								}
							},
							{
								text:'Eastern Europe',
								submenu:{
								   itemdata:[
										{text:'Poland',value:'Pl'},
										{text:'Czech Republic',value:'Cz'},
										{text:'Slovakia',value:'Sk'}
									]
								}
							}
						]
					}
			   },
			   {
					text:'Africa',
				   submenu:{
					   itemdata:[
							{text:'Senegal',value:'Sn'},
							{text:'Madagascar',value:'Mg'}
						]
					}
				}
		   ];

			new inputEx.MenuField({
				parentEl: 'container1',
				name: 'country',
				label: 'Your Country:',
				menuItems: menuItems
			});
		</textarea>
	</div>
</div>



<!-- Example 2 -->
<div class='exampleDiv'>
	<h2>Test with more options</h2>
	<p>Menu triggered on hover, displayed below the text invite, etc.</p>
	<div class='demoContainer' id='container2'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
		var menuItems2 = [
		   {
			   text:'America',
			   submenu:{
				   itemdata:[
						{text:'United States of America',value:'Us'},
						{text:'Canada',value:'Ca'}
					]
				}
		   },
			{
			   text:'Europe',
			   submenu:{
				   itemdata:[
						{
							text:'Western Europe',
							submenu:{
							   itemdata:[
									{text:'France',value:'Fr'},
									{text:'United Kingdom',value:'Uk'},
									{text:'Germany',value:'De'}
								]
							}
						},
						{
							text:'Eastern Europe',
							submenu:{
							   itemdata:[
									{text:'Poland',value:'Pl'},
									{text:'Czech Republic',value:'Cz'},
									{text:'Slovakia',value:'Sk'}
								]
							}
						}
					]
				}
		   },
		   {
				text:'Africa',
			   submenu:{
				   itemdata:[
						{text:'Senegal',value:'Sn'},
						{text:'Madagascar',value:'Mg'}
					]
				}
			}
	   ];

		var div = YAHOO.util.Dom.get('container2');

		var f = new inputEx.MenuField({
			parentEl: 'container2',
			name: 'country',
			label: 'Your Country:',
			required: true,
			typeInvite: 'Hover this text to select a country',
			menuTrigger: 'mouseover',
			menuPosition: ['tr','br'],
			menuItems: menuItems2
		});

		var logDiv = inputEx.cn('div', null, null, "Log :");
		div.appendChild(logDiv);
		f.updatedEvt.subscribe(function(e,params) {
			var value = params[0];
			logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
					logDiv.appendChild(inputEx.cn('br'));
		});

		var button1 = inputEx.cn('button', null, null, "SetValue with 'Fr' (France)");
		div.appendChild(button1);
		YAHOO.util.Event.addListener(button1, "click" ,function() { 
			f.setValue("Fr"); 
		});
		var button2 = inputEx.cn('button', null, null, "SetValue with empty string");
		div.appendChild(button2);
		YAHOO.util.Event.addListener(button2, "click" ,function() { 
			f.setValue('');
		});

		var button3 = inputEx.cn('button', null, null, "GetValue");
		div.appendChild(button3);
		YAHOO.util.Event.addListener(button3, "click" ,function() { 
			alert(f.getValue());
		});

		var button4 = inputEx.cn('button', null, null, "Clear");
		div.appendChild(button4);
		YAHOO.util.Event.addListener(button4, "click" ,function() { 
			f.clear();
		});
		</textarea>
	</div>
</div>


<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/container/container_core.js"></script>
<script type="text/javascript" src="../lib/yui/menu/menu-min.js"></script>

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/fields/MenuField.js"  type='text/javascript'></script>

<!-- inputEx examples -->
<script src="js/dpSyntaxHighlighter.js"></script>
<script src="inputex-examples.js"></script>

 </body>
</html>